<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图书管理登录页面</title>
	<style>
		.myd {
			width: 30%;
			background-color: #f1f1f1;
			padding: 20px;
			margin: 0 auto;
		}
	</style>
	<script>
		function loginAction(){
			if (window.XMLHttpRequest)
			{
				var xhr=new XMLHttpRequest();
			}else{
				var xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			var sno=document.getElementById("sno").value;
			var password=document.getElementById("password").value;
			if(sno==""){
				document.getElementById("msg1").innerHTML="用户名不能为空";
			}
			else{
				document.getElementById("msg1").innerHTML="";
			}
			if(password==""){
				document.getElementById("msg2").innerHTML="密码不能为空";
			}
			else{
				document.getElementById("msg2").innerHTML="";
			}
			xhr.open("POST","Login",true);
			xhr.onreadystatechange=function()
			{
				if (xhr.readyState==xhr.DONE && xhr.status==200)
				{
					document.getElementById("myDiv").innerHTML=xhr.responseText;
				}
				else{
					document.getElementById("myDiv").innerHTML="登录状态";
				}
			}
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send("sno="+sno+"&password="+password);
		}
	</script>
</head>
<body>
<div class="myd">
	<h2>请登录</h2>
	<form method="POST">
		<table>
			<tr>
				<td><label for="sno"> 账号：</label> </td>
				<td> <input type="text" name="sno" id="sno"  placeholder="请输入账号"> </td>
			</tr>
			<tr>
				<td></td>
				<td><span id="msg1" ></span></td>
			</tr>
			<tr>
				<td> <label for="password" >密码：</label> </td>
				<td> <input type="password" name="password" id="password" placeholder="请输入密码"> </td>
			</tr>
			<tr>
				<td></td>
				<td><span id="msg2" ></span></td>
			</tr>
		</table>
		<button type="button" onclick="loginAction()">登录</button>
		<div id="myDiv" style="text-align: center;">登录状态</div>
	</form>
</div>

</body>
</html>